<template>
    <span>
        <Button type="primary" size="small" @click="handleTaskEditShow(data)">编辑</Button>
        <Modal v-model="client_task_edit_modal" title="编辑任务" :mask-closable="false">
            <Form :model="task_current" :label-width="80">
                <FormItem label="任务名称">
                    <Input v-model="task_current.task_name"></Input>
                </FormItem>
                <FormItem label="任务类型">
                    <Select v-model="task_current.task_type">
                        <Option v-for="(item, key) in task_types" :value="item.value" :key="key">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="设备IP">
                    <Input v-model="task_current.client_ip"></Input>
                </FormItem>
                <FormItem label="设备端口">
                    <Input v-model="task_current.client_port"></Input>
                </FormItem>
            </Form>
            <template #footer>
            <Button type="primary" @click="handleClientTaskEditOk">确定</Button>
            <Button type="text" @click="handleClientTaskEditCancel">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
export default {
    name: "TaskEditButton",
    props: {
        data: Object
    },
    data() {
        return {
            task_current: {
                task_id: '',
                task_name: '',
                task_type: '',
                client_id: '',
                client_ip: '',
                client_port: ''
            },
            client_task_edit_modal: false,
            task_types: {
                'PING': { value: 'PING', label: 'PING' },
                'TCP': { value: 'TCP', label: 'TCP' }
            },
        }
    },
    methods: {
        handleTaskEditShow(row) {
            this.task_current.task_id = row.task_id;
            this.task_current.task_name = row.task_name;
            this.task_current.task_type = row.task_type;
            this.task_current.client_id = row.client_id;
            this.task_current.client_ip = row.client_ip;
            this.task_current.client_port = row.client_port;
            this.client_task_edit_modal = true;
        },
        handleClientTaskEditOk() {
            this.$http.post('/update_task', this.task_current).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('修改成功');
                    this.client_task_edit_modal = false;
                    this.$emit('success');
                }else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleClientTaskEditCancel() {
            this.client_task_edit_modal = false;
        },
    }
}
</script>